<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
		
		<view class="createinventory-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		
			
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" 	>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="" slot="top" style="background-color: #F8F8F8;z-index:20">
				<!-- 顶部栏位 -->
				<!-- 搜索栏和选项卡固定 -->
				<view class="u-p-b-30" style="background-color: #FFFFFF;">
					<view class="u-flex">
						<view class="" style="flex:1">
							<!-- 搜索栏位 -->
							<ak-search-input type="text" :searchPlaceHolder="searchPlaceHolder" @focus="showMask(true)" @blur="showMask(false)" @search="search"></ak-search-input>
						</view>
					</view>
				</view>
				<view class="u-flex">
					<u-dropdown class="flilter-item" :active-color="'#ffbb1a'" border-bottom >
						<u-dropdown-item @change="itemListInit" v-if="ownerList.length!==0" :inheritParent="true" v-model="searchOwner" title="品牌商" :options="ownerList"></u-dropdown-item>
					</u-dropdown>
				</view>
				
			</view>
				<view class="history-container">
					<u-checkbox-group  :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
						<u-checkbox 
							:noneClass="isCheckShow"
							:labelClass="true"
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in dataList" :key="item.id" 
							:name="index"
							style="width: 100%;"
						>
								<view class="history-item u-p-20 u-m-b-20 u-flex" :style="{'marginLeft':isCheckShow?'0':'20rpx'}">
									<!-- <image :src="item.itemResourceUrl" mode="" style="width: 144rpx;height: 144rpx;margin-right: 20rpx;"></image> -->
									<image :src="item.url" mode="" style="display:block;width: 144rpx;height: 144rpx;margin-right: 20rpx;"></image>
									<view class="" style="flex: 1;height: 100%;">
										<view :class="['u-font-30',{'u-line-1':item.checked}]" style="font-weight: 500;max-width: 400rpx;">{{item.name}}</view>
									<!-- 	<view class="u-font-24" style="color: #999;">{{item.sellerName}}</view>
										<view class="">
											{{$fui.dateFormatter(item.visitedTime, 'y-m-d')}}
										</view> -->
										<view class="u-flex u-m-t-20" style="width: 220rpx;" v-if="item.checked">
											<u-input input-align="center" :clearable="false" placeholder="库存"	 class="balance-input" v-model="item.inventoryBalance" :type="'number'" :border="true" />
											<view class="u-m-l-20">
												{{item.unit||'瓶'}}
											</view>
										</view>
									</view>
								</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				
				<view slot="bottom">
					<view>
						<!-- bottom的内容 -->
						<view class="history-bottom u-p-r-35 u-p-l-35 u-flex u-col-center u-row-between">
							<u-checkbox class="u-flex" :icon-size="20" :size="40" :name="'全选'" v-model="allSelect" shape="circle" label-size="24rpx" :active-color="themeColor" @change="checkedAll">
								<text style="font-weight: bolder;">全选</text>
							</u-checkbox>
							<button type="default" class="history-del_btn" @click="delHistoryFn">添加</button>
						</view>
					</view>
				</view>
			</z-paging>
			<!-- 遮罩层 -->
			<u-mask :show="isShowMask" :duration="0" :z-index="10"></u-mask>
		</view>
	
</template>

<script>
	import AkSearchInput  from '@/components/ak-search-input'
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { AkSearchInput },
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				isCheckShow:false,
				allSelect:false,
				timer:null,
				searchName:'',
				searchOwner:'',
				ownerList:[],
				searchPlaceHolder: '葡萄酒',
				isShowMask:false,
				
			}
		},
		onLoad() {
			this.getOwnerListFn()
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		methods: {
			itemListInit(){
				this.$refs.paging.reload();
			},
			showMask(bool) {
				bool ? this.searchPlaceHolder = '' : this.searchPlaceHolder = '葡萄酒'
				this.isShowMask = bool
			},
			async getOwnerListFn(){
				const res  = await this.$newHttp.get('api/Seller/GetBrandOwners',{params:{shopId:this.storeShop.id}});
				console.log(res);
				if(res.code === 200){
					let ary = [{
						label:'全部',
						value:'',
					}];
					let ownerlist = res.data.map(item=>{
						return {
							label:item.name,
							value:item.shopId
						}
					});
					this.ownerList = ary.concat(ownerlist);
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.dataList[e.name].checked = e.value;
				this.allSelect = this.dataList.every(item=>{return item.checked === true});
			},
			// 全选
			checkedAll(e) {
				this.dataList.map(val => {
					val.checked = e.value;
				});
			},
			async delHistoryFn(){
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				let ary = [];
				this.dataList.forEach(item=>{
					if(item.checked){
						ary.push({
							itemId:item.id,
							inventoryBalance:item.inventoryBalance
						});
					}
				});
				console.log(ary);
				if(ary.length == 0){
					uni.hideLoading({});
					this.$u.toast('至少选择一条记录');
					return false;
				}
				let params = {
					shopId:this.storeShop.id,
					inventories:ary
				}
				const res = await this.$newHttp.post('api/Seller/SaveShopInventories',params);
				uni.hideLoading({});
				if(res.code == 200){
					this.$u.toast('添加库存成功','success')
					this.$refs.paging.reload();
				}else{
					this.$u.toast('添加库存失败，错误信息：'+res.erroMessage);
				}
				
			},
			search(e){
				this.isShowMask = false
				uni.hideKeyboard()
				this.searchName= e;
				this.$refs.paging.reload();
			},
			// 商品数据加载
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId: this.storeShop.id,
					InInventory:false
				}
				if(this.searchName!== ''){
					params.name = this.searchName;
				}
				if(this.searchOwner!== ''){
					params.BrandOwnerId = this.searchOwner;
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Seller/GetShopItemsPage', { params: params } );
				uni.hideLoading({})
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						item.inventoryBalance = 0;
						return item
					});
					this.$refs.paging.complete(ary);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			
		}
	}
</script>

<style lang="scss" >
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.createinventory-content {
		height: 100%;
		.flilter-item{
			background: #fff;
			::v-deep .u-dropdown__menu{
				.u-dropdown__menu__item{
					position: relative !important;
					.u-flex{
						position: relative !important;
					}
				}
			}
			::v-deep .u-dropdown__content{
				pointer-events: auto;
			}
		}
		.balance-input{
			width: 100rpx !important;
		}
		.history-container{
			box-sizing: border-box;
			padding: 35rpx;
			.history-item{
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
			}
			
		}
		.history-bottom{
			width: 100%;
			height: 138rpx;
			background-color: #fff;
			.history-del_btn{
				width: 200rpx;
				height: 80rpx;
				background: #F0B400;
				border-radius: 40rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				margin: 0;
			}
		}
	}

	
	
</style>
